:root {
	--color-gray-black: #191919;
	--color-gray-dark: #484848;
	--color-gray-medium: #999999;
	--color-gray-light: #CCCCCC;
	--color-gray-white: #F0F0F0;
	--color-black: #000000;
	--color-white: #FFFFFF;
	--color-yellow: #FDD100;
	--color-red: #f67575;
	--color-blue: #ade9ff;
	--personal-center-header-img: url(img/pattern-backgound-1.svg);
	--header-height: 12;
}

* {
	box-sizing: border-box !important;
	margin: 0px;
	padding: 0px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	user-select: none;
	font-family: unset;
}

input,
textarea {
	user-select: unset;
}

a {
	text-decoration: none;
}

html {
	background-color: var(--color-white);
	overflow: hidden;
}

body {
	background-color: transparen;
}

header {
	height: calc(var(--header-height) * 1vw);
	position: fixed;
	background-color: var(--color-white);
	padding: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	overflow: hidden;
	/* box-shadow: 0 0 5px var(--color-gray-light); */
	border-bottom: 1px solid var(--color-gray-white);
	color: var(--color-black);
	z-index: 101;
}

@keyframes rotate-360-anima {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-360deg);
	}
}

.rotate-360 {
	animation: rotate-360-anima;
	animation-duration: 1000ms;
	transform-origin: center center;
}

.bgc-transparent {
	background-color: transparent !important;
	box-shadow: none !important;
}

.bgc-black {
	background-color: var(--color-gray-black);
}

.bgc-black * {
	color: var(--color-white) !important;
}

header.bgc-black {
	box-shadow: 0 0 5px black;
}

header.bgc-black * {
	color: white;
}

header.no-shadow {
	box-shadow: 0 0 0;
}

header>* {
	bottom: 0;
	margin: 0;
	position: absolute;
}

header i {
	font-size: 6vw;
	line-height: 12vw;
}

#Title,
.com-btn {
	font-size: 5vw;
	line-height: 12vw;
	height: 12vw;
	display: block;
}

#Title {
	color: var(--color-black);
	width: 100vw;
	text-align: center;
	z-index: 99;
}

.com-btn {
	display: flex;
	align-items: center;
	padding: 0 5vw !important;
	z-index: 100;
}

#Left.com-btn {
	left: 0;
}

#Right.com-btn {
	right: 0;
}

.temp {
	display: none;
}

.content {
	display: flex;
	flex-direction: column;
	top: 0;
	left: 0;
	padding-top: calc(var(--header-height) * 1vw);
	/* 沉浸式状态栏的适应性动画(避免闪动)
	由于全面使用了自show模式, 可以在完全加载好页面
	之后再显示, 不会出现闪动. 所以动画现已弃用
	transition: top 0.2s ease-in; */
	overflow: auto;
	position: absolute;
	width: 100vw;
	background-color: transparent;
}

.content.fixed {
	bottom: 0;
	height: 100%;
}

.content.flex {
	flex: auto;
}